<template>
  <div>
    <el-table
      ref="table"
      :data="tableData"
      :style="{ width: '100%' }"
      empty-text="暂无数据"
      :height="Number(props.height) - 50"
    >
      <el-table-column prop="name" label="应用名称" width="180" align="center" />
      <el-table-column prop="description" label="描述" align="center" />
      <el-table-column prop="created_at" label="创建时间" align="center" />
      <el-table-column prop="updated_at" label="更新时间" align="center" />
      <el-table-column fixed="right" label="操作" width="180" align="center">
        <template #default="scope">
          <el-button size="small" @click="edit(scope.row)">编辑</el-button>
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            title="确定删除当前记录?"
            @confirm="deleteMenu(scope.row.id)"
          >
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="flex items-center h-50px justify-end">
    <el-pagination
      background
      :page-size="query.pageSize"
      layout="prev, pager, next"
      @change="pageChange"
      :total="total"
    />
  </div>
  <Dialog
    @close="close"
    :visible="visible"
    width="80%"
    height="400px"
    title="应用管理"
    @submit="submit"
  >
    <addForm ref="addFormEl"></addForm>
  </Dialog>
</template>

<script lang="ts" setup>
import { onMounted, defineExpose, ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import Dialog from '@/components/Dialog/Dialog.vue'
import addForm from './addForm.vue'
import { getMainMenu, deleteMainMenu, infoMainMenu, addMainMenu } from '@/api'
import moment from 'moment'
const props = defineProps<{
  height: number | string
}>()
const emit = defineEmits(['pageChange'])
const tableData = ref([])
const total = ref(0)
const visible = ref(false)
let records = reactive<any>({})
const query = ref({
  pageNum: 1,
  pageSize: 10,
  name: ''
})
const addFormEl = ref<InstanceType<typeof addForm> | null>(null)

const close = () => {
  visible.value = false
}
const pageChange = (currentPage: number, pageSize: number) => {
  query.value.pageNum = currentPage
  getMenuList()
}

const edit = (record: any) => {
  records = record
  getInfo(record.id)
  visible.value = true
}
const getInfo = (id) => {
  infoMainMenu({
    id
  }).then((res: any) => {
    if (res.code == 200) {
      addFormEl.value!.setFormData(res.data)
    }
  })
}

const submit = () => {
  if (addFormEl.value) {
    addFormEl.value.ruleFormRef?.validate((valid) => {
      if (valid) {
        const data: any = addFormEl.value?.ruleForm
        data.id = records.id
        addMainMenu(data).then((res: any) => {
          if (res?.code == 200) {
            visible.value = false
            ElMessage({
              message: res.message,
              type: 'success'
            })
            getMenuList()
          } else {
            ElMessage({
              message: res.message,
              type: 'error'
            })
          }
        })
      }
    })
    console.log(addFormEl.value?.ruleForm)
  }
}

const deleteMenu = (id: number) => {
  deleteMainMenu({ id }).then((res: any) => {
    if (res.code == 200) {
      getMenuList()
      ElMessage({
        message: res.message,
        type: 'success'
      })
    } else {
      ElMessage({
        message: res.message,
        type: 'error'
      })
    }
  })
}
const getMenuList = (data = {}) => {
  if (data) {
    query.value = {
      ...query.value,
      ...data
    }
  }
  getMainMenu({ ...query.value }).then((res: any) => {
    if (res.code == 200) {
      res.data.forEach((item) => {
        item.created_at = moment(item.created_at).format('YYYY-MM-DD HH:mm:ss')
        item.updated_at = moment(item.created_at).format('YYYY-MM-DD HH:mm:ss')
      })
      total.value = res.total || 0
      tableData.value = res.data
    }
  })
}
onMounted(() => {
  getMenuList({ name: '' })
})
defineExpose({
  getMenuList
})
</script>
